<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <!-- 
      组件间的关系如何确定：
        创建组件时是不能确认他的关系的。需要看它用在谁身上。

      Props 数据是只读，不允许修改，修改会报错。
        PS: 如果某个 prop 是一个对象类型，修改它的某个属性是不会有问题的。

      要如何修改 Props 数据呢？
        通知父组件，由父组件自己来决定。

        通知【子】：
          1. 声明 emits 选项    【可选】
              emits: ['abcd'],

              PS: 该选项是 Vue3 新增的。该选项在 Vue3 也是可选择的。【不用时可能会触发bug】
          2. 触发 一个自定义事件
              this.$emit('要触发的自定义事件的名字', 可选的传递给这个事件的参数)

        接收【父】:
          在使用组件时，通过 v-on 绑定某个自定义事件        

      $event 特殊变量是个啥
        1. 如果是普通事件，$event 就是该事件的事件对象
        2. 如果是组件触发的自定义事件，$event 就是触发该自定义事件时传递的参数

     -->

    <div id="app">
      <!-- 使用 MySon -->

      <my-son
        :name="son1Name"
        :age="son1Age"
        :city="{ name: '深圳' }"
        v-on:change="handleChange('王八', $event)"
      ></my-son>
    </div>

    <script type="module">
      import { createApp } from "./lib/vue3.esm.browser.js";

      const app = createApp({
        data() {
          return {
            son1Name: "张三",
            son1Age: 18,
          };
        },

        methods: {
          handleChange(event, arg2) {
            console.log("Root 接收到了 Son 的change事件", event);
            // 自己决定要怎么处理
            this.son1Name = event;
          },
        },
      });

      app.component("MySon", {
        // 声明会接受的 prop 列表
        props: ["name", "age", "city"],

        // 声明会触发的 自定义事件 列表
        // emits: ["change"],

        template: `
          <div>
            <p>我是 {{ name }} , 我几年 {{ age }} 岁</p>
            <p>我住在 {{ city.name }}</p>
            <button @click="handleClick">我要叛逆</button>
          </div>
        `,

        methods: {
          handleClick() {
            console.log("handleClick", this.name);
            // 直接修改 prop 数据
            // this.name = "老王";
            // this.city = { name: "上海" };
            // this.city.name = "上海";

            // 触发一个 change 自定义事件
            this.$emit("change", "里斯");
          },
        },
      });

      app.mount("#app");
    </script>
  </body>
</html>
